<template>
	<div>
		<a-card :borderd="false" class="mb-2">
			<a-row :gutter="8">
				<a-col :span="2">
					<a-select v-model:value="config.listQuery.userId" style="width:100%" placeholder="请选择用户"
							  allow-clear>
						<a-select-option v-for="item in config.userList" :key="item.id" :value="item.id">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="12">
					<a-space>
						<a-button type="primary" @click="tableRef.refresh()">搜索</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-card>


		<a-card>
			<h-table :paged="true" ref="tableRef" :data="getList" :columns="columns">
			</h-table>

		</a-card>
	</div>
</template>

<script setup>
import reportApi from '@/api/report/reportApi.js'
import userApi from '@/api/sys/userApi'

const tableRef = ref();
const config = ref({
	tableKey: 0,
	list: null,
	total: null,
	listLoading: false,
	listQuery: {
		current: 1,
		size: 10,
		jobId: undefined
	},
	userList: [],
	dialogVisible: false,
	selectRow: {}
})
const {proxy} = getCurrentInstance();
if (proxy.$route.query.jobId) {
	config.value.listQuery.jobId = proxy.$route.query.jobId
}


const columns = ref([
	{
		title: '用户名',
		key: 'userName',
		dataIndex: 'userName',
		ellipsis: true,
	},
	{
		title: 'licenseName',
		key: 'licenseName',
		dataIndex: 'licenseName',
		ellipsis: true,
	},
	{
		title: '上行流量',
		key: 'upFlowDesc',
		dataIndex: 'upFlowDesc',
		ellipsis: true,
	},
	{
		title: '下行流量',
		key: 'downFlowDesc',
		dataIndex: 'downFlowDesc',
		ellipsis: true,
	},
	{
		title: '总流量',
		key: 'totalFlowDesc',
		dataIndex: 'totalFlowDesc',
		ellipsis: true,
	},
	{
		title: '时间',
		key: 'date',
		dataIndex: 'date',
		ellipsis: true,
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 260,
		fixed: 'right',
		buttonList: [
			{
				type: "primary",
				click: (field, record) => {
					handleFlowMonthReportClick(record)
				},
				render: (record) => {
					return "流量月度明细";
				}
			}
		]
	}
])
onMounted(() => {
	getUserList()
})

const getList = async () => {
	let response = await reportApi.fetchLicenseFlowReportList(config.value.listQuery);
	return response;
}
const getUserList = async () => {
	let response = await userApi.userSelector();
	config.value.userList = response.records
}

const handleFlowMonthReportClick = (row) => {
	proxy.$router.push({
		path: '/proxy/report/licenseFlowMonthReport',
		query: {userId: row.userId, licenseId: row.licenseId}
	})
}
</script>

<style>
.job-msg-div {
	max-height: 400px;
	overflow-y: auto;
}
</style>
